<template>
  <div id="Search">
    <van-tabs
      v-model="active"
      line-width="14px"
      line-height="3px"
      color="#269361"
      title-active-color="#269361"
      title-inactive-color="#000"
      @click="Send"
    >
      <van-tab title="综合" title-style="font-size:14px; font-weight: 700;">
        <Search01></Search01>
        <Zonghe v-bind:xin="xin" v-bind:er="er" v-bind:zu="zu" :shang="shang"></Zonghe>
      </van-tab>
      <van-tab title="新房" title-style="font-size:14px; font-weight: 700;">
        <Search01></Search01>
        <Xin v-bind:xin="xin"></Xin>
      </van-tab>
      <van-tab title="二手房" title-style="font-size:14px; font-weight: 700;">
        <Search01></Search01>
        <Er></Er>
      </van-tab>
      <div>
        <van-tab title="租房" title-style="font-size:14px; font-weight: 700;">
          <Search01></Search01>
          <Renting></Renting>
        </van-tab>
      </div>
      <van-tab title="买商铺" title-style="font-size:14px; font-weight: 700;"
        >内容 6</van-tab
      >
      <van-tab title="租商铺" title-style="font-size:14px; font-weight: 700;"
        >内容 7</van-tab
      >
      <van-tab title="买写字楼" title-style="font-size:14px; font-weight: 700;"
        >内容 8</van-tab
      >
      <van-tab title="租写字楼" title-style="font-size:14px; font-weight: 700;"
        >内容 9</van-tab
      >
      <van-tab title="厂房仓库" title-style="font-size:14px; font-weight: 700;"
        >内容 10</van-tab
      >
    </van-tabs>
  </div>
</template>

<script>
import { mapActions, mapGetters, mapState } from "vuex";
import axios from "axios";
import Search01 from "@/components/Search/Search01";
import Zonghe from "../components/Search_son/01.vue";
import Xin from "../components/Search_son/02.vue";
import Er from "../components/Search_son/03.vue";
import Renting from "../components/Search_son/04.vue";
export default {
  name: "Seaech",
  data() {
    return {
      active: 0,
      xin: [],
      er: [],
      zu: [],
      shang: [],
    };
  },
  components: {
    Search01,
    Zonghe,
    Xin,
    Er,
    Renting,
  },

  created() {
    axios({
      url: "http://localhost:3000/Search",
      params: {
        type: "xin",
      },
    }).then((res) => {
      this.xin = res.data;
    });

    axios({
      url: "http://localhost:3000/Search",
      params: {
        type: "er",
      },
    }).then((res) => {
      this.er = res.data;
      this.$store.commit("mChangeRr", res.data);
    });

    axios({
      url: "http://localhost:3000/Search",
      params: {
        type: "zu",
      },
    }).then((res) => {
      this.zu = res.data;
    });

    axios({
      url: "http://localhost:3000/Search",
      params: {
        type: "shang",
      },
    }).then((res) => {
      this.shang = res.data;
    });
  },
  methods: {
    ...mapActions(["Request"]),
    Send(name, title) {
      console.log("电机成功", name, title);
      if (name == 3) {
        this.$store.dispatch("Request", "zu");
        // this.Request();
      }
    },
  },
};
</script>

<style scoped>
#Search {
  height: 100%;
}
</style>
